<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的购物车-小米商城</title>
    <link
      rel="shortcut icon"
      href="../images/favicon.ico"
      type="image/x-icon"
    />
    <!-- 引入icon图标 -->
    <link rel="stylesheet" href="../lib/yidongduan/iconfont.css" />
    <link
      rel="stylesheet"
      href="../lib/swiper-5.4.5/package/css/swiper.min.css"
    />
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/footer.css" />
    <link rel="stylesheet" href="../css/shop-car.css" />
  </head>

  <body>
    <div class="header">
      <div class="container">
        <div class="menu_bar">
          <!-- logo -->
          <div class="menu_bar_logo">
            <a href="../index.html" class="bar_logo">
              <em class="mi_home"></em>
              <em class="mi_logo"></em>
            </a>
          </div>
        </div>
        <div class="header-text">
          <h2>我的购物车</h2>
          <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
        </div>
        <div class="header-logIn">
          <div class="header-logIn-box">
            <a href="../html/log-in.html" class="logIn">登录</a>
            <span class="spa">|</span>
            <a href="#" class="register">注册</a>
          </div>
        </div>
      </div>
    </div>
    <div class="srcipt">
      <div class="container">
        <div class="car-container">
          <div class="container-main">
            <!-- 购物车列表 -->
            <div class="car-wrap">
              <div class="car-goods-list">
                <!-- 购物车头部 -->
                <div class="list-head clearfix">
                  <div class="col col-check">
                    <i class="iconfont icon-xuanze"></i>
                    全选
                  </div>
                  <div class="col col-img">&nbsp;</div>
                  <div class="col col-name">商品名称</div>
                  <div class="col col-price">单价</div>
                  <div class="col col-num">数量</div>
                  <div class="col col-total">小计</div>
                  <div class="col col-action">操作</div>
                </div>
                <!-- 购物车主体 -->
                <div class="list-body" id="list-Body">
                  <!-- <div class="list-item">
                    <div class="item-box">
                      <div class="item-table">
                        <div class="item-row clearfix">
                          <div class="col col-check">
                            <i class="iconfont icon-xuanze icon-xaunze"></i>
                          </div>
                          <div class="col col-img">
                            <a href="#">
                              <img
                                src="../images/shop-car/pms_1478510064.36397738.jpg"
                                alt=""
                              />
                            </a>
                          </div>
                          <div class="col col-name">
                            <div class="tags"></div>
                            <div class="tags"></div>
                            <h3 class="name">
                              <a href="javascript:void(0)"
                                >小米二合一数据线100cm 白色</a
                              >
                            </h3>
                          </div>
                          <div class="col col-price">
                            24.9元
                            <p class="pre-info"></p>
                          </div>
                          <div class="col col-num">
                            <div class="change-goods-num clearfix">
                              <a href="#"><i class="iconfont">&#xeb03;</i></a>
                              <input
                                type="text"
                                autocomplete="off"
                                class="goods-num"
                                value="1"
                              />
                              <a href="#"><i class="iconfont">&#xeb01;</i></a>
                            </div>
                          </div>
                          <div class="col col-total">
                            24.9元
                            <p class="pre-info"></p>
                          </div>
                          <div class="col col-action">
                            <a href="#" title="删除" class="del">
                              <i class="iconfont">&#xe982;</i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="list-item">
                    <div class="item-box">
                      <div class="item-table">
                        <div class="item-row clearfix">
                          <div class="col col-check">
                            <i class="iconfont icon-xuanze icon-xaunze"></i>
                          </div>
                          <div class="col col-img">
                            <a href="#">
                              <img
                                src="../images/shop-car/pms_1478510064.36397738.jpg"
                                alt=""
                              />
                            </a>
                          </div>
                          <div class="col col-name">
                            <div class="tags"></div>
                            <div class="tags"></div>
                            <h3 class="name">
                              <a href="javascript:void(0)"
                                >小米二合一数据线100cm 白色</a
                              >
                            </h3>
                          </div>
                          <div class="col col-price">
                            24.9元
                            <p class="pre-info"></p>
                          </div>
                          <div class="col col-num">
                            <div class="change-goods-num clearfix">
                              <a href="#"><i class="iconfont">&#xeb03;</i></a>
                              <input
                                type="text"
                                autocomplete="off"
                                class="goods-num"
                                value="1"
                              />
                              <a href="#"><i class="iconfont">&#xeb01;</i></a>
                            </div>
                          </div>
                          <div class="col col-total">
                            24.9元
                            <p class="pre-info"></p>
                          </div>
                          <div class="col col-action">
                            <a href="#" title="删除" class="del">
                              <i class="iconfont">&#xe982;</i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="list-item">
                    <div class="item-box">
                      <div class="item-table">
                        <div class="item-row clearfix">
                          <div class="col col-check">
                            <i class="iconfont icon-xuanze icon-xaunze"></i>
                          </div>
                          <div class="col col-img">
                            <a href="#">
                              <img
                                src="../images/shop-car/pms_1478510064.36397738.jpg"
                                alt=""
                              />
                            </a>
                          </div>
                          <div class="col col-name">
                            <div class="tags"></div>
                            <div class="tags"></div>
                            <h3 class="name">
                              <a href="javascript:void(0)"
                                >小米二合一数据线100cm 白色</a
                              >
                            </h3>
                          </div>
                          <div class="col col-price">
                            24.9元
                            <p class="pre-info"></p>
                          </div>
                          <div class="col col-num">
                            <div class="change-goods-num clearfix">
                              <a href="#"><i class="iconfont">&#xeb03;</i></a>
                              <input
                                type="text"
                                autocomplete="off"
                                class="goods-num"
                                value="1"
                              />
                              <a href="#"><i class="iconfont">&#xeb01;</i></a>
                            </div>
                          </div>
                          <div class="col col-total">
                            24.9元
                            <p class="pre-info"></p>
                          </div>
                          <div class="col col-action">
                            <a href="#" title="删除" class="del">
                              <i class="iconfont">&#xe982;</i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div> -->
                </div>
                <script type="text/html" id="listBody">
                  {{each arr item}}
                  <div class="list-item">
                    <div class="item-box">
                      <div class="item-table">
                        <div class="item-row clearfix">
                          <div class="col col-check">
                            <i class="iconfont icon-xuanze icon-xaunze"></i>
                          </div>
                          <div class="col col-img">
                            <a href="#">
                              <img src="{{item.shopImg}}" alt="" />
                            </a>
                          </div>
                          <div class="col col-name">
                            <div class="tags"></div>
                            <div class="tags"></div>
                            <h3 class="name">
                              <a href="javascript:void(0)">{{item.shopName}}</a>
                            </h3>
                          </div>
                          <div class="col col-price">
                            {{item.price}}
                            <p class="pre-info"></p>
                          </div>
                          <div class="col col-num">
                            <div class="change-goods-num clearfix">
                              <a href="#"><i class="iconfont">&#xeb03;</i></a>
                              <input
                                type="text"
                                autocomplete="off"
                                class="goods-num"
                                value="{{item.quantity}}"
                              />
                              <a href="#"><i class="iconfont">&#xeb01;</i></a>
                            </div>
                          </div>
                          <div class="col col-total">
                            {{item.quantity*item.price}}
                            <p class="pre-info"></p>
                          </div>
                          <div class="col col-action">
                            <a href="#" title="删除" class="del">
                              <i class="iconfont">&#xe982;</i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  {{/each}}
                </script>
                <!-- 占位 -->
                <div class="raise-buy-box"></div>
                <!-- 尾部结算 -->
                <div class="cart-bar clearfix">
                  <div class="section-left">
                    <a href="" class="back-shopping" stat_exposure="true">
                      继续购物
                    </a>
                    <span class="cart-total">
                      共<i class="allCount"></i>件商品
                      <!-- ， 已选择<i> 0</i>件 -->
                    </span>
                  </div>
                  <span class="total-price">
                    合计：<em class="allprice1"></em> 元
                    <a
                      href=""
                      class="btn btn-a btn-disabled"
                      stat_exposure="true"
                    >
                      去结算
                    </a>
                  </span>
                  <!-- <div class="no-select-tip">
                    请勾选需要结算的商品
                    <i class="arrow arrow-a"></i>
                    <i class="arrow arrow-b"></i>
                  </div> -->
                </div>
              </div>
            </div>
            <!-- 推荐 -->
            <div class="car-recommend">
              <!-- 推荐的标题 -->
              <div class="mi-recommend cart-recommend">
                <h2 class="recommend-title">
                  <span>买购物车中商品的人还买了</span>
                </h2>
              </div>
              <!-- 推荐的内容 -->
              <div id="J_recommend_cartBuy" class="recommend-bd">
                <ul class="recommend-list clearfix" id="shopRecommend">
                  <!-- <li class="recommend-item">
                    <a href="">
                      <img src="../images/shop-car/tuijian (1).jpg" />
                      <div class="recommend-name">
                        小米USB Type-C快速充电数据线
                      </div>
                      <div class="recommend-price">16.9元</div>
                      <div class="recommend-tips">82.1万人好评</div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary"> 加入购物车 </a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li>
                  <li class="recommend-item">
                    <a href="">
                      <img src="../images/shop-car/tuijian (1).jpg" />
                      <div class="recommend-name">
                        小米USB Type-C快速充电数据线
                      </div>
                      <div class="recommend-price">16.9元</div>
                      <div class="recommend-tips">82.1万人好评</div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary">加入购物车</a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li>
                  <li class="recommend-item">
                    <a href="">
                      <img src="../images/shop-car/tuijian (1).jpg" />
                      <div class="recommend-name">
                        小米USB Type-C快速充电数据线
                      </div>
                      <div class="recommend-price">16.9元</div>
                      <div class="recommend-tips">82.1万人好评</div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary">加入购物车</a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li>
                  <li class="recommend-item">
                    <a href="">
                      <img src="../images/shop-car/tuijian (1).jpg" />
                      <div class="recommend-name">
                        小米USB Type-C快速充电数据线
                      </div>
                      <div class="recommend-price">16.9元</div>
                      <div class="recommend-tips">82.1万人好评</div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary">加入购物车</a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li>
                  <li class="recommend-item">
                    <a href="">
                      <img src="../images/shop-car/tuijian (1).jpg" />
                      <div class="recommend-name">
                        小米USB Type-C快速充电数据线
                      </div>
                      <div class="recommend-price">16.9元</div>
                      <div class="recommend-tips">82.1万人好评</div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary">加入购物车</a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li>
                  <li class="recommend-item">
                    <a href="">
                      <img src="../images/shop-car/tuijian (1).jpg" />
                      <div class="recommend-name">
                        小米USB Type-C快速充电数据线
                      </div>
                      <div class="recommend-price">16.9元</div>
                      <div class="recommend-tips">82.1万人好评</div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary">加入购物车</a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li>
                  <li class="recommend-item">
                    <a href="">
                      <img src="../images/shop-car/tuijian (1).jpg" />
                      <div class="recommend-name">
                        小米USB Type-C快速充电数据线
                      </div>
                      <div class="recommend-price">16.9元</div>
                      <div class="recommend-tips">82.1万人好评</div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary">加入购物车</a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li>
                  <li class="recommend-item">
                    <a href="">
                      <img src="../images/shop-car/tuijian (1).jpg" />
                      <div class="recommend-name">
                        小米USB Type-C快速充电数据线
                      </div>
                      <div class="recommend-price">16.9元</div>
                      <div class="recommend-tips">82.1万人好评</div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary">加入购物车</a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li>
                  <li class="recommend-item">
                    <a href="">
                      <img src="../images/shop-car/tuijian (1).jpg" />
                      <div class="recommend-name">
                        小米USB Type-C快速充电数据线
                      </div>
                      <div class="recommend-price">16.9元</div>
                      <div class="recommend-tips">82.1万人好评</div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary">加入购物车</a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li>
                  <li class="recommend-item">
                    <a href="">
                      <img src="../images/shop-car/tuijian (1).jpg" />
                      <div class="recommend-name">
                        小米USB Type-C快速充电数据线
                      </div>
                      <div class="recommend-price">16.9元</div>
                      <div class="recommend-tips">82.1万人好评</div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary">加入购物车</a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li> -->
                </ul>
                <script type="text/html" id="shopCarRecommend">
                  {{each list item}}
                  <li class="recommend-item">
                    <a href="../html/detail-page.html?{{item.product_id}}">
                      <img src="{{item.pc_img}}" />
                      <div class="recommend-name">{{item.goods_name}}</div>
                      <div class="recommend-price">{{item.goods_price}}元</div>
                      <div class="recommend-tips">
                        {{item.seckill_Price}}万人好评
                      </div></a
                    >
                    <div class="recommend-action">
                      <a class="btn btn-small btn-line-primary"> 加入购物车 </a>
                    </div>
                    <div class="recommend-notice">
                      <a class="btn btn-block btn-green btn-notice">
                        成功加入购物车
                      </a>
                    </div>
                  </li>
                  {{/each}}
                </script>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
    <script
      src="../lib/requirejs/require.min.js"
      data-main="../js/shop-car"
    ></script>
  </body>
</html>
